<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors  : lijing
 * @Date: 2019-10-09 21:11:31
 * @LastEditTime : 2020-02-05 16:43:10
 * @FilePath: \blog-pages-qianyu\src\components\articleKinds.vue
 * @Description: 文章分类组件
 -->

<template>
  <b-card border-variant="light" align="left" class="mt-10">
    <span>文章分类</span>
    <hr />
    <b-card-text v-for="(c, index) in categories" :key="index">
      <b-link @click="getArticlesByCategory(c.category)">{{c.category}}</b-link>
      <b-badge variant="light" class="float-right">{{c.number}}篇</b-badge>
    </b-card-text>
  </b-card>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
import url from "@/request/url";
export default {
  name: "ArticleKinds",
  data() {
    return {
      categories: null
    };
  },
  methods: {
    ...mapMutations(["setPageInfo", "setCurrentPage", "setCondition"]),
    ...mapActions(["getArticles"]),
    getArticlesByCategory(category) {
      this.setCondition({
        condition: "category",
        data: category
      });
      this.setCurrentPage(1);
      this.getArticles();
    }
  },
  created() {
    this.$axios
      .get(url.comm.categories)
      .then(res => (this.categories = res.data));
  }
};
</script>

<style scoped>
.float-right {
  float: right;
}
</style>
